<template>
	<view :class="['item','item-'+index]" @click="clickItem(item)">
		<view class="info">
			<view class="avatar">
				<lazy-load-image class="img" :image="item.img" imgMode='aspectFill' :errorImg="config.errorImage.avator" height="86rpx" borderRadius="43" />
				<icon :class="['iconfont icon','icon-auth-'+item.auth]">&#xe796;</icon>
			</view>
			<view class="name">
				<view class="t">
					<view class="l">
						<text class="nickname">{{item.nickname}}</text>
						<text :class="['state',{'state-rest':!item.is_working}]" @click.stop="showWorkTime(item)">{{item.is_working?'服务中':'休息中'}}</text>
					</view>
					<view class="r">
						<icon class="iconfont icon" v-if="item.mobile" @click.stop="contact(item,'mobile')">&#xe76f;</icon>
						<icon class="iconfont icon" v-if="item.weixin" @click.stop="contact(item,'weixin')">&#xe7d5;</icon>
					</view>
				</view>
				<view class="b">
					<text>服务评分：{{item.score}}</text>
					<text>咨询量：{{item.im_num>=1000?'999+':item.im_num}}</text>
					<text>访问量：{{item.space_num>=1000?'999+':item.space_num}}</text>
				</view>
			</view>
		</view>
		<view class="tags">
			<view class="item-tag" v-for="(item_tag,index_tag) in item.service_type" :key="index_tag">
				<text>{{item_tag}}</text>
			</view>
		</view>
		<view class="desc">
			<text>{{item.introduce}}</text>
		</view>
		<view class="service">
			<template v-for="(item_serve,index_serve) in item.service" :key="index_serve">
				<view class="item-serve" v-if="index_serve==0" @click.stop="openServeDetail(item_serve)">
					<text class="label">TA的服务</text>
					<text class="value">{{item_serve.title}}</text>
				</view>
			</template>
		</view>
	</view>
	<!-- 联系 -->
	<popup-contact ref="popupContactRef"></popup-contact>
	<!-- 服务 -->
	<popup-service ref="popupServiceRef"></popup-service>
</template>
<script setup>
	import { ref, defineComponent } from 'vue';
	import popupContact from './popup-contact.vue';
	import popupService from './popup-service.vue';
	import { tongji } from '@/common/api/common/tongji.js';
	import config from '@/uni.config.js';
	defineComponent({
		popupContact,
		popupService
	});
	defineProps({
		item: Object,
		index: {
			type: Number,
			default: -1
		}
	});
	const popupContactRef = ref(null);
	const popupServiceRef = ref(null);

	function showWorkTime(item) {
		uni.showToast({
			icon: 'none',
			title: `服务时间：${item.worktimestart}-${item.worktimeend}`
		})
	}
	// 联系弹窗
	function contact(item, type) {
		popupContactRef.value.open(item, type);
		tongji({ type, merchant_mid: item.mid });
	}

	function clickItem(item) {
		uni.navigateTo({
			url: `/subpages/space/space?mid=${item.mid}`
		})
	}
	// 打开服务详情
	function openServeDetail(item) {
		popupServiceRef.value.open(item);
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.item {
		margin-top: 26rpx;
		padding: 30rpx 20rpx;
		border-radius: 18rpx;
		background-color: #fff;
		&-0 {
			margin-top: 0;
		}
	}
	.info {
		@include flex;
		.avatar {
			position: relative;
			width: 86rpx;
			height: 86rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.icon {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 30rpx;
				height: 30rpx;
				justify-content: center;
				border-radius: 50%;
				font-size: 20rpx;
				color: #fff;
			}
			.icon-auth {
				&-1 {
					background-color: #faad14;
				}
				&-2 {
					background-color: #ff4d00;
				}
			}
		}
		.name {
			flex: 1;
			margin-left: 20rpx;
			.t {
				@include flex;
				.l {
					@include flex;
				}
				.nickname {
					max-width: 230rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-weight: 700;
					font-size: 34rpx;
					color: #000;
				}
				.state {
					margin-left: 10rpx;
					padding: 6rpx 15rpx;
					border-radius: 6rpx;
					background-color: #F2F5F9;
					font-size: 24rpx;
					color: $color;
					&-rest {
						color: #aaa;
					}
				}
				.r {
					@include flex;
					.icon {
						margin: 0 0 0 20rpx;
						font-size: 40rpx;
						color: #CAD8EF;
					}
				}
			}
			.b {
				margin: 2rpx -18rpx 0;
				text {
					padding: 0 18rpx;
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	.tags {
		@include flex;
		justify-content: flex-start;
		margin: 20rpx -10rpx 10rpx;
		.item-tag {
			margin: 0 10rpx 10rpx;
			padding: 8rpx 20rpx;
			border-radius: 4rpx;
			background-color: #F5F5F5;
			font-size: 24rpx;
			color: #888;
		}
	}
	.desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 42rpx;
		word-break: break-all;
		font-size: 28rpx;
		color: #666;
	}
	.service {
		.item-serve {
			@include flex;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			margin: 20rpx 0 0;
			padding: 0 24rpx;
			background-color: #FFF5E5;
			border-radius: 8rpx;
			.label {
				margin-right: 30rpx;
				font-weight: 700;
				font-size: 30rpx;
				color: #EF7E51;
			}
			.value {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
				color: #222;
			}
		}
	}
</style>
